<template>
  <section v-loading="loading">
    <!-- 工具栏 -->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="condition">
        <el-form-item label>
          <el-select
            v-model="condition._area"
            placeholder="区域编号"
            @change="areaChange(condition._area)"
            clearable
          >
            <el-option
              v-for="item in area"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label>
          <el-select
            v-model="condition._dorm"
            placeholder="宿舍楼编号"
            @change="dormChange(condition._dorm)"
            clearable
          >
            <el-option
              v-for="item in dorm"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="condition._floor" placeholder="楼层" clearable>
            <el-option
              v-for="item in serial"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="condition._roomNumber" placeholder="房间编号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!-- 操作 -->
    <el-col>
      <el-form :inline="true">
        <el-form-item>
          <el-upload
            action="http://192.168.10.225/dormitoryA/cost/Cost/importRoom"
            :on-success="importRoomSuccess"
            :on-error="importRoomError"
            ref="upload"
            :data="roomInfo"
            :limit="1"
            :before-upload="beforeUpload"
          >
            <el-button size="small" type="primary">导入房间水电表</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-upload
            action="http://192.168.10.225/dormitoryA/cost/Cost/importFloor"
            :on-success="importFloorSuccess"
            :on-error="importFloorError"
            ref="upload"
            :data="floorInfo"
            :limit="1"
            :before-upload="beforeUpload"
          >
            <el-button size="small" type="primary">导入楼层水电表</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="success" @click="outRoom">导出房间水电表</el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="success" @click="outFloor">导出楼层水电表</el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="beginning">期初</el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="danger" @click="monthEndCost">期末</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!-- 房间数据展示 -->
    <el-table :data="roomData" style="width: 100%" v-loading="roomLoading">
      <el-table-column align="center" type="selection" fixed width="50"></el-table-column>
      <el-table-column align="center" label="序号" fixed type="index" width="50"></el-table-column>
      <el-table-column align="center" label="区域名称" prop="affiliation" fixed min-width="150"></el-table-column>
      <el-table-column align="center" label="宿舍楼名称" prop="dorm" min-width="100"></el-table-column>
      <el-table-column align="center" label="楼层" prop="floor" min-width="50"></el-table-column>
      <el-table-column align="center" label="房间号" prop="roomNumber" min-width="100"></el-table-column>
      <el-table-column align="center" label="历史冷水表" prop="oldCold" min-width="90"></el-table-column>
      <el-table-column align="center" label="当前冷水表" prop="newCold" min-width="90"></el-table-column>
      <el-table-column align="center" label="历史热水表" prop="oldHot" min-width="90"></el-table-column>
      <el-table-column align="center" label="当前热水表" prop="newHot" min-width="90"></el-table-column>
      <el-table-column align="center" label="历史电表" prop="oldElectricity" min-width="90"></el-table-column>
      <el-table-column align="center" label="当前电表" prop="newElectricity" min-width="90"></el-table-column>
      <el-table-column align="center" label="操作" min-width="150">
        <template slot-scope="scope">
          <el-button size="small" type="success" @click="roomEdit(scope.$index, scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 房间分页 -->
    <el-col :span="24" class="toolbar">
      <el-pagination
        @current-change="roomChange"
        :current-page="roomPage"
        :total="roomTotalPage"
        style="float:right;"
      ></el-pagination>
    </el-col>

    <!-- 楼层数据展示 -->
    <el-table :data="floorData" style="width: 100%" v-loading="floorLoading">
      <el-table-column align="center" label="区域名称" prop="affiliation" fixed min-width="150"></el-table-column>
      <el-table-column align="center" label="宿舍楼名称" prop="dorm" min-width="100"></el-table-column>
      <el-table-column align="center" label="楼层" prop="floor" min-width="50"></el-table-column>
      <el-table-column align="center" label="历史冷水表" prop="oldCold" min-width="90"></el-table-column>
      <el-table-column align="center" label="当前冷水表" prop="newCold" min-width="90"></el-table-column>
      <el-table-column align="center" label="历史电表" prop="oldElectricity" min-width="90"></el-table-column>
      <el-table-column align="center" label="当前电表" prop="newElectricity" min-width="90"></el-table-column>
      <el-table-column align="center" label="历史空气能用电表" prop="oldAirelectric" min-width="100"></el-table-column>
      <el-table-column align="center" label="当前空气能用电表" prop="newAirelectric" min-width="100"></el-table-column>
      <el-table-column align="center" label="历史空气能用水表" prop="oldAirwater" min-width="100"></el-table-column>
      <el-table-column align="center" label="当前空气能用水表" prop="newAirwater" min-width="100"></el-table-column>
      <el-table-column align="center" label="操作" min-width="130">
        <template slot-scope="scope">
          <el-button size="small" type="success" @click="floorEdit(scope.$index, scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 楼层分页 -->
    <el-col :span="24" class="toolbar">
      <el-pagination
        @current-change="floorChange"
        :current-page="floorPage"
        :total="floorTotalPage"
        style="float:right;"
      ></el-pagination>
    </el-col>

    <!-- 房间数据编辑 -->
    <el-dialog title="编辑" :visible.sync="alterRoomFormVisible" :close-on-click-modal="false">
      <el-form label-width="6rem" ref="editForm" :model="alterRoom" :rules="rule">
        <el-form-item label="历史冷水表" prop="oldCold">
          <el-input v-model.number="alterRoom.oldCold"></el-input>
        </el-form-item>
        <el-form-item label="当前冷水表" prop="newCold">
          <el-input v-model.number="alterRoom.newCold"></el-input>
        </el-form-item>
        <el-form-item label="历史热水表" prop="oldHot">
          <el-input v-model.number="alterRoom.oldHot"></el-input>
        </el-form-item>
        <el-form-item label="当前热水表" prop="newHot">
          <el-input v-model.number="alterRoom.newHot"></el-input>
        </el-form-item>
        <el-form-item label="历史电表" prop="oldElectricity">
          <el-input v-model.number="alterRoom.oldElectricity"></el-input>
        </el-form-item>
        <el-form-item label="当前电表" prop="newElectricity">
          <el-input v-model.number="alterRoom.newElectricity"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="alterRoomFormVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click.native="editRoomSubmit('editForm')"
          :loading="editRoomLoading"
        >提交</el-button>
      </div>
    </el-dialog>

    <!-- 楼层数据编辑 -->
    <el-dialog title="编辑" :visible.sync="alterFloorFormVisible" :close-on-click-modal="false">
      <el-form label-width="10rem" ref="editForm" :model="alterFloor" :rules="rule">
        <el-form-item label="历史冷水表" prop="oldCold">
          <el-input v-model.number="alterFloor.oldCold"></el-input>
        </el-form-item>
        <el-form-item label="当前冷水表" prop="newCold">
          <el-input v-model.number="alterFloor.newCold"></el-input>
        </el-form-item>
        <el-form-item label="历史电表" prop="oldElectricity">
          <el-input v-model.number="alterFloor.oldElectricity"></el-input>
        </el-form-item>
        <el-form-item label="当前电表" prop="newElectricity">
          <el-input v-model.number="alterFloor.newElectricity"></el-input>
        </el-form-item>
        <el-form-item label="历史空气能用电表" prop="oldAirelectric">
          <el-input v-model.number="alterFloor.oldAirelectric"></el-input>
        </el-form-item>
        <el-form-item label="当前空气能用电表" prop="newAirelectric">
          <el-input v-model.number="alterFloor.newAirelectric"></el-input>
        </el-form-item>
        <el-form-item label="历史空气能用水表" prop="oldAirwater">
          <el-input v-model.number="alterFloor.oldAirwater"></el-input>
        </el-form-item>
        <el-form-item label="当前空气能用水表" prop="newAirwater">
          <el-input v-model.number="alterFloor.newAirwater"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="alterFloorFormVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click.native="editFloorSubmit('editForm')"
          :loading="editFloorLoading"
        >提交</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
import { getArea } from "../../api/area.js";
import { getDorm, getFloor } from "../../api/dorm.js";
import {
  getMeter,
  beginning,
  editRoomMeter,
  editFloorMeter,
  monthEndCost
} from "../../api/cost.js";
export default {
  data() {
    return {
      condition: {
        _area: null,
        _dorm: null,
        _floor: null,
        _roomNumber: null,
        // page: 1,
        roomPage: 1,
        floorPage: 1
      },
      roomData: [],
      floorData: [],
      area: [
        {
          value: "",
          label: ""
        }
      ],
      dorm: [
        {
          value: "",
          label: ""
        }
      ],
      serial: [],
      roomLoading: false,
      floorLoading: false,
      roomPage: 1,
      roomTotalPage: 1,
      floorPage: 1,
      floorTotalPage: 1,
      loading: false,
      roomInfo: {},
      floorInfo: {},
      alterRoomFormVisible: false,
      alterRoom: {},
      editRoomLoading: false,
      alterFloorFormVisible: false,
      alterFloor: {},
      editFloorLoading: false,
      rule: {
        oldCold: [{ required: true, message: "请输入数据", trigger: "blur" }],
        newCold: [{ required: true, message: "请输入数据", trigger: "blur" }],
        oldHot: [{ required: true, message: "请输入数据", trigger: "blur" }],
        newHot: [{ required: true, message: "请输入数据", trigger: "blur" }],
        oldElectricity: [
          { required: true, message: "请输入数据", trigger: "blur" }
        ],
        newElectricity: [
          { required: true, message: "请输入数据", trigger: "blur" }
        ],
        oldAirelectric: [
          { required: true, message: "请输入数据", trigger: "blur" }
        ],
        newAirelectric: [
          { required: true, message: "请输入数据", trigger: "blur" }
        ],
        oldAirwater: [
          { required: true, message: "请输入数据", trigger: "blur" }
        ],
        newAirwater: [
          { required: true, message: "请输入数据", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    areaChange(area) {
      if (area === "") {
        return true;
      }
      // this.loading = true;
      // 搜索宿舍楼编号
      getDorm(area).then(res => {
        this.loading = false;
        if (res) {
          // this.condition._dorm = null;
          this.dorm = res.msg;
        } else {
          this.dorm = [
            {
              value: "",
              label: ""
            }
          ];
          // this.condition._dorm = "";
        }
      });
    },
    dormChange(dorm) {
      if (dorm === "") {
        return true;
      }
      // this.loading = true;
      // 获取当前楼层
      getFloor(this.condition._area, this.condition._dorm).then(res => {
        this.loading = false;
        if (res) {
          this.serial = [];
          let floor = res.msg[0].d_layers;
          for (let i = 1; i <= floor; i++) {
            let _floor = { value: i, label: i };
            this.serial.push(_floor);
          }
        } else {
          this.serial = [];
        }
      });
    },
    // 取数
    getData() {
      this.loading = true;
      getMeter(this.condition).then(res => {
        this.loading = false;
        if (res) {
          // 查询成功
          this.roomData = res.roomResult;
          this.roomTotalPage = res.roomSumPage;
          this.floorTotalPage = res.floorSumPage;
          this.floorData = res.floorResult;
        } else {
          this.roomData = {};
          this.roomTotalPage = 1;
          this.floorTotalPage = 1;
          this.floorData = {};
        }
      });
    },
    // 查询
    search() {
      // 查询时2个页数都归0
      // this.condition.roomPage = 1;
      // this.condition.floorPage = 1;
      this.getData();
    },
    importRoomSuccess(res) {
      // res = JSON.parse(res);
      this.loading = false;
      if (res.ret === "40001") {
        this.$alert(res.msg, "系统提示", {
          cancelButtonText: "确定"
        });
      }
    },
    importRoomError(response) {
      this.loading = false;
      this.$message.error("文件上传失败!");
    },
    importFloorSuccess(res) {
      this.loading = false;
      if (res.ret === "40001") {
        this.$alert(res.msg, "系统提示", {
          cancelButtonText: "确定"
        });
      }
    },
    importFloorError(response) {
      this.loading = false;
      this.$message.error("文件上传失败!");
    },
    beforeUpload() {
      this.loading = true;
    },
    // 导出房间水电表
    outRoom() {
      window.location.href =
        "http://192.168.10.225:80/dormitoryA/cost/Cost/excelRoomMeterOut";
    },
    // 导出楼层水电表
    outFloor() {
      window.location.href =
        "http://192.168.10.225:80/dormitoryA/cost/Cost/excelFloorMeterOut";
    },
    // 期初
    beginning() {
      this.$confirm("将进行期初操作,是否继续?", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          beginning().then(res => {
            if (res) {
              this.$alert(res.msg, "系统提示", { confirmButtonText: "确定" });
            }
          });
        })
        .catch(() => {
          console.log("用户已取消操作");
        });
    },
    // 期末
    monthEndCost() {
      this.$confirm("将进行期末操作,是否继续?", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // 检查区域和宿舍楼
          if (!this.condition._area || !this.condition._dorm) {
            this.$message.error("请选择计算宿舍楼!");
            return false;
          }
          // 期末
          this.loading = true;
          monthEndCost(this.condition).then(res => {
            this.loading = false;
            if (res) {
              // 导出当月费用
              window.location.href =
                "http://192.168.10.225:80/dormitoryA/cost/Cost/monthFinalCostOut";
            } else {
              this.$message.error("计算失败");
            }
          });
        })
        .catch(() => {
          console.log("用户已取消操作");
        });
    },
    // 编辑表
    roomEdit(index, row) {
      this.alterRoomFormVisible = true;
      // row.newCold = parseInt(row.newCold);
      // row.newElectricity = parseInt(row.newElectricity);
      // row.newHot = parseInt(row.newHot);
      // row.oldCold = parseInt(row.oldCold);
      // row.oldElectricity = parseInt(row.oldElectricity);
      // row.oldHot = parseInt(row.oldHot);
      this.alterRoom = Object.assign({}, row);
    },
    editRoomSubmit() {
      console.log(this.alterRoom);
      this.editRoomLoading = true;
      //
      editRoomMeter(this.alterRoom).then(res => {
        this.editRoomLoading = false;
        if (res) {
          // 修改成功
          this.$alert(res.msg, "系统提示", {
            confirmButtonText: "确定",
            callback: action => {
              this.alterRoomFormVisible = false;
              this.search();
            }
          });
        } else {
          // 修改失败软提示
        }
      });
    },

    floorEdit(index, row) {
      this.alterFloorFormVisible = true;
      // row.newCold = parseInt(row.newCold);
      // row.newElectricity = parseInt(row.newElectricity);
      // row.newHot = parseInt(row.newHot);
      // row.oldCold = parseInt(row.oldCold);
      // row.oldElectricity = parseInt(row.oldElectricity);
      // row.oldHot = parseInt(row.oldHot);
      this.alterFloor = Object.assign({}, row);
    },
    editFloorSubmit() {
      console.log(this.alterFloor);
      this.editFloorLoading = true;
      //
      editFloorMeter(this.alterFloor).then(res => {
        this.editFloorLoading = false;
        if (res) {
          // 修改成功
          this.$alert(res.msg, "系统提示", {
            confirmButtonText: "确定",
            callback: action => {
              this.alterFloorFormVisible = false;
              this.search();
            }
          });
        } else {
          // 修改失败软提示
        }
      });
    },

    // 房间分页
    roomChange(val) {
      this.condition.roomPage = val === undefined ? this.roomPage : val;
      // this.condition.floorPage = 1;
      this.getData();
    },
    // 楼层分页
    floorChange(val) {
      this.condition.floorPage = val === undefined ? this.floorPage : val;
      // this.condition.floorPage = 1;
      this.getData();
    },

    // 获取区域
    getArea() {
      getArea().then(res => {
        if (res) {
          this.area = res.msg;
        }
      });
    }
  },
  mounted() {
    // 获取宿舍区域
    this.getArea();
  }
};
</script>
<style>
</style>
